<template>
    <div>
        <AButton :color="state.color" :size="state.size" :disabled="state.disabled" :sharp="state.sharp" :circle="state.circle" :round="state.round" :square="state.square" :block="state.block" :loading="state.loading" :plain="state.plain" :link="state.link" :hollow="state.hollow" :align="state.align" :active="state.active" :halfHeight="state.halfHeight">{{ state.text }}</AButton>
    </div>
    <AForm class="c-m-t-m" color="primary" style="max-width: 800px;">
        <AFormItem label="color" class="c-m-t-m">
            <AInputRadioButton v-model:value="state.color" :items="(['default', 'primary', 'secondary', 'success', 'warning', 'error'] as ColorType[])" :get-text-func="a => a" :get-value-func="a => a"></AInputRadioButton>
        </AFormItem>
        <AFormItem label="size" class="c-m-t-m">
            <AInputRadioButton v-model:value="state.size" :items="(['xs', 's', 'm', 'l', 'xl'] as SizeType[])" :get-text-func="a => a" :get-value-func="a => a"></AInputRadioButton>
        </AFormItem>
        <div class="grid-container">
            <AFormItem label="disabled" class="c-m-t-m">
                <AInputSwitch v-model:value="state.disabled"></AInputSwitch>
            </AFormItem>
            <AFormItem label="sharp" class="c-m-t-m">
                <AInputSwitch v-model:value="state.sharp"></AInputSwitch>
            </AFormItem>
            <AFormItem label="circle" class="c-m-t-m">
                <AInputSwitch v-model:value="state.circle"></AInputSwitch>
            </AFormItem>
            <AFormItem label="round" class="c-m-t-m">
                <AInputSwitch v-model:value="state.round"></AInputSwitch>
            </AFormItem>
            <AFormItem label="square" class="c-m-t-m">
                <AInputSwitch v-model:value="state.square"></AInputSwitch>
            </AFormItem>
            <AFormItem label="block" class="c-m-t-m">
                <AInputSwitch v-model:value="state.block"></AInputSwitch>
            </AFormItem>
            <AFormItem label="loading" class="c-m-t-m">
                <AInputSwitch v-model:value="state.loading"></AInputSwitch>
            </AFormItem>
            <AFormItem label="plain" class="c-m-t-m">
                <AInputSwitch v-model:value="state.plain"></AInputSwitch>
            </AFormItem>
            <AFormItem label="link" class="c-m-t-m">
                <AInputSwitch v-model:value="state.link"></AInputSwitch>
            </AFormItem>
            <AFormItem label="hollow" class="c-m-t-m">
                <AInputSwitch v-model:value="state.hollow"></AInputSwitch>
            </AFormItem>
            <AFormItem label="active" class="c-m-t-m">
                <AInputSwitch v-model:value="state.active"></AInputSwitch>
            </AFormItem>
            <AFormItem label="halfHeight" class="c-m-t-m">
                <AInputSwitch v-model:value="state.halfHeight"></AInputSwitch>
            </AFormItem>
        </div>
        <AFormItem label="align" class="c-m-t-m">
            <AInputRadioButton v-model:value="state.align" :items="(['left', 'center', 'right'] as AlignType[])" :get-text-func="a => a" :get-value-func="a => a"></AInputRadioButton>
        </AFormItem>
        <AFormItem label="text" class="c-m-t-m">
            <AInputString v-model:value="state.text"></AInputString>
        </AFormItem>
    </AForm>
</template>

<style lang="scss" scoped>
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
}
</style>

<script setup lang="ts">
import { AButton, AForm, AFormItem, AInputRadioButton, AInputString, AInputSwitch } from 'aosv'
import type { AlignType, ColorType, SizeType } from 'aosv/dist/types'
import { reactive } from 'vue'

interface StateType {
    color: ColorType
    size: SizeType
    disabled: boolean
    sharp: boolean
    circle: boolean
    round: boolean
    square: boolean
    block: boolean
    loading: boolean
    plain: boolean
    link: boolean
    hollow: boolean
    align: AlignType
    active: boolean
    halfHeight: boolean

    text: string
}
const state = reactive<StateType>({
    color: 'default',
    size: 'm',
    disabled: false,
    sharp: false,
    circle: false,
    round: false,
    square: false,
    block: false,
    loading: false,
    plain: false,
    link: false,
    hollow: false,
    align: 'center',
    active: false,
    halfHeight: false,

    text: '按钮'
})
</script>